<script setup lang="ts">
import { ref } from "vue";
import { RouterView, useRouter } from "vue-router";

const router = useRouter();

//是否显示功能按钮区域
var menuShow = ref(true);
//home 按钮
var homeBtn = ref(false);

const year = ref(new Date().getFullYear());

function home() {
    menuShow = ref(true);
    homeBtn = ref(false);
    window.location.href = "\\";
}

function back() {
    router.back();
}
</script>

<template>
    <main class="relative">
        <div>
            <div
                v-show="menuShow"
                class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 gap-5 p-4 z-10"
            >
                <RouterLink
                    to="/alert"
                    @click="
                        menuShow = !menuShow;
                        homeBtn = !homeBtn;
                    "
                    class="bg-base-200 rounded-selector p-4 aspect-square shadow-lg content-center block"
                >
                    <svg
                        class="w-4/6 h-4/6 text-gray-800 dark:text-white mx-auto"
                        aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M12 5.464V3.099m0 2.365a5.338 5.338 0 0 1 5.133 5.368v1.8c0 2.386 1.867 2.982 1.867 4.175C19 17.4 19 18 18.462 18H5.538C5 18 5 17.4 5 16.807c0-1.193 1.867-1.789 1.867-4.175v-1.8A5.338 5.338 0 0 1 12 5.464ZM6 5 5 4M4 9H3m15-4 1-1m1 5h1M8.54 18a3.48 3.48 0 0 0 6.92 0H8.54Z"
                        />
                    </svg>

                    <p class="p-bold text-center">每日工作</p>
                </RouterLink>
                <RouterLink
                    to="/materials"
                    @click="
                        menuShow = !menuShow;
                        homeBtn = !homeBtn;
                    "
                    class="bg-base-200 rounded-selector p-4 aspect-square shadow-lg content-center block"
                >
                    <svg
                        class="w-4/6 h-4/6 text-gray-800 dark:text-white mx-auto"
                        aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        fill="none"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M9 8h6m-6 4h6m-6 4h6M6 3v18l2-2 2 2 2-2 2 2 2-2 2 2V3l-2 2-2-2-2 2-2-2-2 2-2-2Z"
                        />
                    </svg>

                    <p class="p-bold text-center">材料管理</p>
                </RouterLink>
                <RouterLink
                    to="/order"
                    @click="
                        menuShow = !menuShow;
                        homeBtn = !homeBtn;
                    "
                    class="bg-base-200 rounded-selector p-4 aspect-square shadow-lg content-center block"
                >
                    <svg
                        class="w-4/6 h-4/6 text-gray-800 dark:text-white mx-auto"
                        aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M10 3v4a1 1 0 0 1-1 1H5m4 8h6m-6-4h6m4-8v16a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7.914a1 1 0 0 1 .293-.707l3.914-3.914A1 1 0 0 1 9.914 3H18a1 1 0 0 1 1 1Z"
                        />
                    </svg>

                    <p class="p-bold text-center">订单管理</p>
                </RouterLink>
                <RouterLink
                    to="/company"
                    @click="
                        menuShow = !menuShow;
                        homeBtn = !homeBtn;
                    "
                    class="bg-base-200 rounded-selector p-4 aspect-square shadow-lg content-center block"
                >
                    <svg
                        class="w-4/6 h-4/6 text-gray-800 dark:text-white mx-auto"
                        aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        fill="none"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-width="2"
                            d="M3 21h18M4 18h16M6 10v8m4-8v8m4-8v8m4-8v8M4 9.5v-.955a1 1 0 0 1 .458-.84l7-4.52a1 1 0 0 1 1.084 0l7 4.52a1 1 0 0 1 .458.84V9.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5Z"
                        />
                    </svg>

                    <p class="p-bold text-center">客户管理</p>
                </RouterLink>
                <RouterLink
                    to="/contacts"
                    @click="
                        menuShow = !menuShow;
                        homeBtn = !homeBtn;
                    "
                    class="bg-base-200 rounded-selector p-4 aspect-square shadow-lg content-center block"
                >
                    <svg
                        class="w-4/6 h-4/6 text-gray-800 dark:text-white mx-auto"
                        aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        fill="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            fill-rule="evenodd"
                            d="M7 2a2 2 0 0 0-2 2v1a1 1 0 0 0 0 2v1a1 1 0 0 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H7Zm3 8a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-1 7a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3 1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1Z"
                            clip-rule="evenodd"
                        />
                    </svg>
                    <p class="p-bold text-center">联系人管理</p>
                </RouterLink>
                <RouterLink
                    to="/email"
                    @click="
                        menuShow = !menuShow;
                        homeBtn = !homeBtn;
                    "
                    class="bg-base-200 rounded-selector p-4 aspect-square shadow-lg content-center block"
                >
                    <svg
                        class="w-4/6 h-4/6 text-gray-800 dark:text-white mx-auto"
                        aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-width="2"
                            d="m3.5 5.5 7.893 6.036a1 1 0 0 0 1.214 0L20.5 5.5M4 19h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Z"
                        />
                    </svg>

                    <p class="p-bold text-center">邮箱</p>
                </RouterLink>
                <RouterLink
                    to="/chatroom"
                    @click="
                        menuShow = !menuShow;
                        homeBtn = !homeBtn;
                    "
                    class="bg-base-200 rounded-selector p-4 aspect-square shadow-lg content-center block"
                >
                    <svg
                        class="w-4/6 h-4/6 text-gray-800 dark:text-white mx-auto"
                        aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="none"
                    >
                        <path
                            d="M17 3.33782C15.5291 2.48697 13.8214 2 12 2C6.47715 2 2 6.47715 2 12C2 13.5997 2.37562 15.1116 3.04346 16.4525C3.22094 16.8088 3.28001 17.2161 3.17712 17.6006L2.58151 19.8267C2.32295 20.793 3.20701 21.677 4.17335 21.4185L6.39939 20.8229C6.78393 20.72 7.19121 20.7791 7.54753 20.9565C8.88837 21.6244 10.4003 22 12 22C17.5228 22 22 17.5228 22 12C22 10.1786 21.513 8.47087 20.6622 7"
                            stroke="currentColor"
                            stroke-width="1.5"
                            stroke-linecap="round"
                        />
                    </svg>
                    <p class="p-bold text-center">聊天室</p>
                </RouterLink>
                <RouterLink
                    to="/calendar"
                    @click="
                        menuShow = !menuShow;
                        homeBtn = !homeBtn;
                    "
                    class="bg-base-200 rounded-selector p-4 aspect-square shadow-lg content-center block"
                >
                    <svg
                        class="w-4/6 h-4/6 text-gray-800 dark:text-white mx-auto"
                        aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        fill="none"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M12 6.03v13m0-13c-2.819-.831-4.715-1.076-8.029-1.023A.99.99 0 0 0 3 6v11c0 .563.466 1.014 1.03 1.007 3.122-.043 5.018.212 7.97 1.023m0-13c2.819-.831 4.715-1.076 8.029-1.023A.99.99 0 0 1 21 6v11c0 .563-.466 1.014-1.03 1.007-3.122-.043-5.018.212-7.97 1.023"
                        />
                    </svg>

                    <p class="p-bold text-center">工作计划</p>
                </RouterLink>
            </div>

            <div class="fab fab-flower">
                <!-- a focusable div with tabindex is necessary to work on all browsers. role="button" is necessary for accessibility -->
                <div
                    tabindex="0"
                    role="button"
                    class="btn btn-lg btn-info btn-circle"
                >
                    <svg
                        class="w-6 h-6 text-gray-800 dark:text-white"
                        aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        fill="none"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M5 12h14m-7 7V5"
                        />
                    </svg>
                </div>

                <!-- Main Action button replaces the original button when FAB is open -->
                <button
                    class="fab-main-action btn btn-circle btn-lg btn-success"
                >
                    <svg
                        class="w-6 h-6 text-gray-800 dark:text-white"
                        aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        fill="none"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke="currentColor"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M6 18 17.94 6M18 18 6.06 6"
                        />
                    </svg>
                </button>

                <!-- buttons that show up when FAB is open -->
                <div class="tooltip tooltip-left" data-tip="Label A">
                    <button
                        @click="home()"
                        class="btn btn-circle btn-lg shadow-lg btn-success z-40"
                    >
                        <svg
                            class="w-6 h-6 text-gray-800 dark:text-white"
                            aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg"
                            width="24"
                            height="24"
                            fill="none"
                            viewBox="0 0 24 24"
                        >
                            <path
                                stroke="currentColor"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="m4 12 8-8 8 8M6 10.5V19a1 1 0 0 0 1 1h3v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h3a1 1 0 0 0 1-1v-8.5"
                            />
                        </svg>
                    </button>
                </div>

                <div class="tooltip" data-tip="Label D">
                    <button
                        @click="back()"
                        class="btn btn-lg btn-circle btn-success shadow-lg z-40"
                    >
                        <svg
                            class="w-6 h-6 text-gray-800 dark:text-white"
                            aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg"
                            width="24"
                            height="24"
                            fill="none"
                            viewBox="0 0 24 24"
                        >
                            <path
                                stroke="currentColor"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M3 9h13a5 5 0 0 1 0 10H7M3 9l4-4M3 9l4 4"
                            />
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
                <component :is="Component" />
            </transition>
        </router-view>

        <footer
            v-show="!homeBtn"
            class="relative bottom-0 footer sm:footer-horizontal footer-center text-base-content text-center justify-center flex w-full p-light text-sm"
        >
            <aside>
                <p>
                    Copyright © {{ year }} - All right reserved by Owen.
                    Technology support by
                    <a href="mailto:techsupport@example.com"
                        >techsupport@example.com
                    </a>
                </p>
            </aside>
        </footer>
    </main>
</template>

<style>
.fade-enter-active {
    transition: opacity 1.5s;
}

.fade-leave-active {
    transition: opacity 1.5s;
}

.fade-enter-from {
    transition: opacity 1.5s;
}

.fade-leave-to {
    opacity: 1.5s;
}
</style>
